<template>
  <div style="width:90%;height:80%;background-color: #ffffff;margin-top:1%;float: left;margin-left: 3%">
    <div >
      <el-radio-group v-model="chose" size="medium" @change="changeChose" fill="#209e91">
        <el-radio-button label="近一周" ></el-radio-button>
        <el-radio-button label="近一月"></el-radio-button>
        <el-radio-button label="本年"></el-radio-button>
      </el-radio-group>
    </div>
    <div id="main" style="width: 100%;height: 100%;margin-top: 10px"></div>
    <div id="module1" class="echarts"></div>
  </div>
</template>

<script>
export default {
  name: "VehicleRepaireStatistics",
  data(){
    return{
      chose:'近一周',
      rdata:[],
      mdata:[]
    }
  },
  created() {
    this.getWeekData();
  },
  methods:{
    getRepair(){
      let chartDom = document.getElementById('main');
      let myChart = this.$echarts.init(chartDom);
      let color = ['#8fcec8', '#ef8888', '#e8cd5f', '#acc947', '#e8cd5f','#90cfc9','#b9f2a1'];
      let option;
      const that=this;
      console.info(that.rdata)
      console.info(that.mdata)
      const seriesLabel = {
        show: true
      };
      option = {
        color:color,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['待执行', '执行中', '已完成'],
          x:'center',
          y:'top'
        },
        grid: {
          left: 100
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        //x轴坐标设置
        xAxis: {
          type: 'value',
          name: '',
          axisLabel: {
            formatter: '{value}'
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: ['维修', '保养'],
          axisLabel: {
            formatter: function (value) {
              return  value ;
            },
            margin: 20,
            rich: {
              value: {
                lineHeight: 30,
                align: 'center'
              },
            }
          }
        },
        series: [
          {
            name: '待执行',
            type: 'bar',
            data: [that.rdata[0],that.mdata[0]],
            label: seriesLabel,
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, '50%'],
              label: {
                formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                backgroundColor: 'rgb(242,242,242)',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 8,
                padding: [4, 10],
                lineHeight: 20,
                // shadowBlur: 5,
                // shadowColor: '#000',
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
                position: 'right',
                distance: 20,
                rich: {
                  a: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 18,
                    textShadowBlur: 2,
                    textShadowColor: '#000',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 1,
                    textBorderColor: '#333',
                    textBorderWidth: 2
                  },
                  b: {
                    color: '#333'
                  },
                  c: {
                    color: '#ff8811',
                    textBorderColor: '#000',
                    textBorderWidth: 1,
                    fontSize: 50
                  }
                }
              }
            }
          },
          {
            name: '执行中',
            type: 'bar',
            label: seriesLabel,
            data: [that.rdata[1],that.mdata[1]]
          },
          {
            name: '已完成',
            type: 'bar',
            label: seriesLabel,
            data: [that.rdata[2],that.mdata[2]]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getWeekData(){
      this.$axios({
        url: 'dispatch/maintenance/getRepairRecentWeek',
        method: 'post'
      }).then(res => {
        if(res.data.success){
          this.rdata=res.data.object.rdata;
          this.mdata=res.data.object.mdata;
          this.getRepair();
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    getMonthData(){
      this.$axios({
        url: '/dispatch/maintenance/getRepairRecentMonth',
        method: 'post'
      }).then(res => {
        console.info(res.data.object)
        if(res.data.success){
          this.rdata=res.data.object.rdata;
          this.mdata=res.data.object.mdata;
          this.getRepair();
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    getYearData(){
      this.$axios({
        url: 'dispatch/maintenance/getRepairThisYear',
        method: 'post'
      }).then(res => {
        if(res.data.success){
          this.rdata=res.data.object.rdata;
          this.mdata=res.data.object.mdata;
          this.getRepair();
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    },
    //日期按钮切换
    changeChose(){
      if(this.chose=='近一周'){
        this.getWeekData();
        this.getRepair();
      }else if(this.chose=='近一月'){
        this.getMonthData();
        this.getRepair();
      }else if(this.chose=='本年'){
        this.getYearData();
        this.getRepair();
      }
    },
  },
}
</script>

<style scoped>

</style>
